<template>
	<view class="card-info">
		<scroll-view class="card-left" scroll-y="true">
			<view class="tab-box" :class="{'tab-active': leftSelectIndex == index}" v-for="(item,index) in leftData"
				:key="index" @click="selectType(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view class="card-right" scroll-y="true">
			<view class="data-list">
				<view class="right-item" v-if="rightData.length>0" v-for="(item,index) in rightData" :key="index"
					@click="chooseItem(item)">
					<image class="item-l" v-if="item.url" :src="item.url"></image>
					<view class="item-r">
						<view class="title">{{item.name}}</view>
						<view class="mess-name" v-if="item.descr">{{item.descr}}</view>
						<view class="time" v-if="item.price2 || item.price1">
							<view class="time-left"> ¥{{item.price2}}<span class="old"
									v-if="item.price1">¥{{item.price1}}</span>
							</view>
							<view class="time-right" @click.stop="goBuy(item)">去抢购</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata-box" v-if="rightData.length == 0">
				<image :src="noDataImg"></image>
				<view class="text">暂无数据</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			//左侧选项数据
			leftData: {
				type: Array,
				default () {
					return []
				}
			},
			//右侧选项数据
			rightData: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				noDataImg: require('../../static/noData.png'),
				leftSelectIndex: 0
			}
		},
		methods: {
			selectType(index) {
				if (this.leftSelectIndex == index) return
				this.leftSelectIndex = index
				this.$emit("lClick", index)
			},
			chooseItem(item) {
				this.$emit("rClick", item)
			},
			goBuy(item) {
				this.$emit("buyClick", item)
			}
		}
	}
</script>

<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>

<style scoped>
	.card-info {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: 100vh;
		background-color: #F4F4F4;
	}

	.card-left {
		width: 232rpx;
		height: 100%;
		background-color: #ffffff;
	}

	.tab-box {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #666666;
		border-bottom: solid #F4F4F4 1px;
	}

	.tab-active {
		background: rgba(250, 209, 141, 0.15);
		font-weight: bold;
		color: #BE800A;
		position: relative;
	}

	.tab-active::before {
		width: 8rpx;
		height: 100%;
		background: linear-gradient(93deg, #B47D32 0%, #FAD18D 100%);
		border-radius: 3rpx;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
	}

	.card-right {
		width: calc(100% - 264rpx);
		height: 100%;
		margin: 0 auto;
	}

	.data-list {
		padding-bottom: 32rpx;
	}

	.right-item {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 16rpx;
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.1);
		border-radius: 4rpx;
	}

	.item-l {
		width: 72rpx;
		height: 72rpx;
		min-width: 72rpx;
		margin-right: 24rpx;
		border-radius: 50%;
	}

	.item-r {
		width: calc(100% - 96rpx);
	}

	.title {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 30rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mess-name {
		width: 100%;
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #666666;
		line-height: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; //控制显示的行数
	}

	.time {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.time-left {
		font-size: 30rpx;
		color: #BE800A;
		line-height: 24rpx;
	}

	.old {
		margin-left: 10rpx;
		font-size: 20rpx;
		color: #AEAEAE;
		line-height: 20rpx;
		text-decoration: line-through;
	}

	.time-right {
		width: 110rpx;
		height: 42rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		border: 2rpx solid #BE800A;
		line-height: 42rpx;
		text-align: center;
		font-size: 26rpx;
		color: #BE800A;
	}


	.nodata-box {
		width: 100%;
		margin-top: 20%;
		text-align: center;
	}

	.nodata-box image {
		width: 200rpx;
		height: 200rpx;
		margin-top: 32rpx;
	}

	.nodata-box .text {
		width: 100%;
		text-align: center;
		color: #666666;
		font-size: 28rpx;
	}
</style>